react学习日记第一记 |
您所在的位置：网站首页 › webpack 配置 react › react学习日记第一记 |
react学习日记第一记
|
对于前端开发者来说，无论使用vue 还是react还是angular，打包工具的配置永远都是一个必须的过程，因为这决定了打包出来项目的大小，资源占用，以及运行速度。 由于之前的项目一直都是在使用vue，对于vue的webpack（3.x）配置坑也踩的差不多了，正好公司不忙，可以抽空学习下react，接下来直接进入正题吧 一、搭建react开发环境 俗话说：‘工欲善其事，必先利其器’，作为才接毕业半年的小白来说，在工作中深刻的体会到开发工作对工具使用的重要性。 1、首先运行环境-node是必须的，需要下载安装node的运行环境，官网下载即可点击[打开连接][1] 2、安装好node后，npm也自动安装好了，npm是随从nodeJs的包管理工具，当然也可使用yarn，本文使用的是npm 3、全局安装脚手架`npm install -g create-react-app`注意，用习惯vue的可能有点不太习惯这种方式，这来源于两个框架的设计思维不一样（vue的安装方式`npm install -g vue-cli`）个人见解，不喜勿喷。 4、创建项目：在文件夹下执行`create-react-app myFirstReact` 5、启动项目：`npm start` 至此，我们的第一个react项目就搭建完成了二、解压webpack 你会发现这时候创建的文件目录和vue大不一样，vue的build里面包含了webpack.base、webpack.dev、webpack.prod三个配置webpack的基础文件，而react并没有build文件，只是因为react隐藏了webpack的配置文件所以我们需要在命令控制台执行npm run eject，执行完之后，webpack文件被暴露出来。注意：此操作不可逆解压出来的文件目录如下： 接下来我们就需要配置相关的webpack 三，去掉map { test: /\.(js|mjs)$/, exclude: /@babel(?:\/|\\{1,2})runtime/, loader: require.resolve('babel-loader'), options: { babelrc: false, configFile: false, compact: false, presets: [ [ require.resolve('babel-preset-react-app/dependencies'), { helpers: true } ] ], cacheDirectory: true, cacheCompression: isEnvProduction, // If an error happens in a package, it's possible to be // because it was compiled. Thus, we don't want the browser // debugger to show the original code. Instead, the code // being evaluated would be much more helpful. sourceMaps: false } },将 sourceMaps改为false。打包出来的文件就没有了map const publicPath = isEnvProduction ? paths.servedPath : isEnvDevelopment && '/'; // Some apps do not use client-side routing with pushState. // For these, "homepage" can be set to "." to enable relative asset paths. const shouldUseRelativeAssetPaths = publicPath === './';将路径改为相对路径'./'如何使用@去取代相对路径呢？ alias: { // Support React Native Web // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/ 'react-native': 'react-native-web', '@': path.join(__dirname, '..', 'src') //使用@符号做相对路径处理 },在alias里面加入 '@': path.join(__dirname, '..', 'src') //使用@符号做相对路径处理 四、使用stylus 因为之前使用vue的时候就很喜欢stylus，相比less和scss，stylus更容易上手。但是在react的wbpack4.0+版本中如何配置和在项目中使用stylus呢？起初，我以在vue中webpack3.0+的项目中配置，发现根本就不是那么回事，后来去网上找类似的Blog，也没有，几乎全部都是旧的react脚手架和将webpack基础配置文件分开的，全部不是我想要的。所以自己就动手尝试配置一下。`{ // "oneOf" will traverse all following loaders until one will // match the requirements. When no loader matches it will fall // back to the "file" loader at the end of the loader list. oneOf: [ // "url" loader works like "file" loader except that it embeds assets // smaller than specified limit in bytes as data URLs to avoid requests. // A missing `test` is equivalent to a match. { test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/], loader: require.resolve('url-loader'), options: { limit: 10000, name: 'static/media/[name].[hash:8].[ext]' } }, { test: /\.styl$/, use: [ require.resolve('style-loader'), require.resolve('css-loader'), require.resolve('stylus-loader') ] },` 可以使用vscode的搜索功能搜索oneOf数组，然后再里面添加`{ test: /\.styl$/, use: [ require.resolve('style-loader'), require.resolve('css-loader'), require.resolve('stylus-loader') ] },` 仅仅配置此处就行了，然后建立css文件的时候要用.styl而不是用.css、此处省略了安装stylus的过程，请自行百度。跟vue的使用是一样的。这些基础的配置到此就结束就，第一次写博客，不到之处，错误之处还望多多指正。 文章来源：segmentfault，作者：彼岸花开。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件至：sean.li#ucloud.cn（邮箱中#请改为@）进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容。
后台-系统设置-扩展变量-手机广告位-内容正文底部
|
【本文地址】
今日新闻 |
推荐新闻 |